import dynamic from 'next/dynamic'
import styles from './index.module.scss'
import Responsive from '@c/responsive'
import Footer from '@c/footer'
import Button from '@c/button'
import message from '@c/message'
import cm from 'classnames'
import { userInfo } from '@/store'
import { useShowLogin, useVipDialog } from '@/utils/hooks'
import { buyVipReport, openPayModalReport } from '@/utils/report'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
import { useEffect } from 'react'

const ModalPayH5 = dynamic(() => import('@c/modal/modal-pay-h5'))

const quanyiArr = [
  {
    icon: '/images/v-line.webp',
    title: '最优线路',
    desc: '会员独享高清线路，点播资源秒开无卡顿。画质更细腻，观看体验瞬间提升！'
  },
  {
    icon: '/images/v-live.webp',
    title: '电视直播',
    desc: '会员畅享流畅电视直播，500+频道任你选。直击热门节目，精彩不断，娱乐生活全方位升级！'
  },
  {
    icon: '/images/v-source.webp',
    title: '资源下载',
    desc: '随时随地的下载视频，然后随时随地观看，观影不受网络限制。留住精彩时刻，随时随地畅享！'
  },
  {
    icon: '/images/v-rate.webp',
    title: '倍速播放',
    desc: '视频节奏由我掌控！会员独享全部倍速，观看更自由，随心调节观影体验！'
  }
]

const advArr = [
  {
    icon: '/images/adv-1.webp',
    title: '海量流媒体资源',
    desc: '汇聚了各大平台优质流媒体资源，持续快速更新的资源让您时刻掌握最新、最精彩的内容，体验前所未有的多样性和便捷！'
  },
  {
    icon: '/images/adv-2.webp',
    title: '全球直播频道',
    desc: '提供500+频道和自建频道功能，让您随时随地感受世界各地的电视直播，掌握世界的多彩氛围！'
  },
  {
    icon: '/images/adv-3.webp',
    title: '界面清晰无广告',
    desc: '友好的交互设计令您畅享纯粹的流媒体体验，流畅播放，零干扰，尽情沉浸在精彩内容中！'
  },
  {
    icon: '/images/adv-4.webp',
    title: '平价VIP尊贵待遇',
    desc: '选择高级服务，会员费用远低于同类平台，且支持网页/手机端/TV端共享会员，让您以经济实惠的方式畅享更多高级特权，感受流媒体的尊贵待遇！'
  }
]

const Index = props => {
  const user = useRecoilValue(userInfo)
  const { vipData } = props
  const setShowLogin = useShowLogin()
  const showVipDialog = useVipDialog()
  const [currIndex, setCurrIndex] = useState(1)
  const openDialog = index => {
    const isLogin = localStorage.getItem('token')
    openPayModalReport({
      isLogin: isLogin ? 'true' : 'false',
      package_type: vipData[index].pDesc,
      user_type: user?.isVip ? '会员' : '非会员'
    })
    if (!isLogin) {
      setShowLogin(true)
      return
    }
    buyVipReport({
      package_type: vipData[index].pDesc,
      user_type: user.isVip ? '会员' : '非会员'
    })
    showVipDialog(index)
  }
  const opens = index => {
    setCurrIndex(index)
    openDialog(index)
  }
  useEffect(() => {
    return () => {
      sessionStorage.setItem('lastPage', true)
    }
  }, [])
  return (
    <>
      <div className="hideWhenPhone">
        <div className={styles.vipBox}>
          <img loading="lazy" src="/images/vip-top.webp" className="w-screen" alt="背景" />
          <div className={styles.vipMeal}>
            {vipData.map((item, index) => {
              const nol =  item.pCount > 7 ? (Math.floor(item.pCount / 30) + '个月') : item.pCount +'天'
              return (
                <div
                  className={cm(styles.mealItem, index === currIndex ? styles.active : '')}
                  key={index}
                  onClick={() => opens(index)}
                >
                  {item.cornerMark ? <span className={styles.cornerMark}>{item.cornerMark}</span> : null}
                  <span className={styles.desc}>{item.pDesc || nol}</span>
                  <div className={styles.price}>
                    <span>$</span>
                    <span>{(item.usdPrice / 100).toFixed(1)}</span>
                    {item.tagMark ? <p className={styles.popular}>{item.tagMark}</p> : null}
                  </div>
                  <p className={styles.discountMark}>{item.discountMark}</p>
                  <Button hover="opacity" className={cm(styles.buy, index === 1 ? styles.buy2 : '')}>
                    立即购买
                  </Button>
                </div>
              )
            })}
          </div>
          <p className={styles.vipTitle}>会员能提供什么服务？</p>
          <p className={styles.vipTips}>一个会员，全家齐享</p>
          <div className={styles.quanyiTitle}>
            <p className={styles.quanyiItem}>权益</p>
            <p className={styles.quanyiItem}>普通用户</p>
            <p className={styles.quanyiItem}>
              <span>会员用户</span>
              <span className={styles.joinVip} onClick={() => openDialog(1)}>
                加入会员
              </span>
            </p>
          </div>
          <div className={styles.quanyi}>
            <p className={styles.quanyiItem}>全球影视点播</p>
            <p className={styles.quanyiItem}>三方线路：未处理/质量低/三方广告</p>
            <p className={styles.quanyiItem}>官方线路：高清/无广告/更新快</p>
          </div>
          <div className={styles.quanyi}>
            <p className={styles.quanyiItem}>电视直播</p>
            <p className={styles.quanyiItem}>自建频道</p>
            <p className={styles.quanyiItem}>所有频道</p>
          </div>
          <div className={styles.quanyi}>
            <p className={styles.quanyiItem}>下载</p>
            <p className={styles.quanyiItem}>-</p>
            <p className={styles.quanyiItem}>
              <img loading="lazy" src="/images/gou.png" alt="下载" />
            </p>
          </div>
          <div className={styles.quanyi}>
            <p className={styles.quanyiItem}>倍速</p>
            <p className={styles.quanyiItem}>0.5X、0.75X、1.0X、1.25X</p>
            <p className={styles.quanyiItem}>0.5X、0.75X、1.25X、1.5X、2X</p>
          </div>
          <div className={cm(styles.vipQuanxian, styles.vipQuanxian1)}>
            {quanyiArr.map((item, index) => {
              return (
                <div key={index} className={styles.quanxianItem}>
                  <div className={styles.iconBox}>
                    <img loading="lazy" src={item.icon} alt={item.title} />
                  </div>
                  <p className={styles.vtitle}>{item.title}</p>
                  <p className={styles.vdesc}>{item.desc}</p>
                </div>
              )
            })}
          </div>
          <p className={cm(styles.vipTitle, styles.vipTitle2)}>为什么选择星视界？</p>
          <div className={styles.adv}>
            {advArr.map((item, index) => {
              return (
                <div key={index} className={styles.advItem}>
                  <img loading="lazy" src={item.icon} className={styles.icon} alt={item.title} />
                  <p className={styles.vtitle}>{item.title}</p>
                  <p className={styles.vdesc}>{item.desc}</p>
                </div>
              )
            })}
          </div>
        </div>
        <Responsive>
          <Footer />
        </Responsive>
      </div>
      <ModalPayH5 vipData={vipData} h5PaySuccess={() => message({ content: '会员开通成功，返回首页观看吧~' })} />
    </>
  )
}

export default Index

export async function getServerSideProps() {
  let layoutProps = {}
  try {
    layoutProps = {
      noSomeMetaInfo: false,
      title: `${actorInfo.name}人物介绍及相关影片 - 星视界`,
      desc: actorInfo.info || `${actorInfo.name}人物简介 - 星视界`,
      url: '/person'
    }
  } catch (error) {}
  return {
    props: {
      layoutProps: {
        noSomeMetaInfo: false,
        title: '加入会员 - 星视界',
        desc: '星视界提供最全的中文电视直播及优质的点播线路，让您体验N合一的极致视觉体验。赶快开通体验吧！',
        url: '/vip'
      }
    }
  }
}
